<template>
	<van-empty description="暂无匹配" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
		v-if="list.length==0" style="width: 100vw;"/>
	<scroll-view scroll-y="true" style=" height: 100vh;padding-top: 8vh;" @scrolltolower="lowerBottom" v-else refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<view class="meslist" v-for="(item,index) in list" :key="item.userid">
			<div class="mes_card">
				<div class="mes_card_top">
					<div style="padding-top: 20px;padding-left: 20px;" class="decription">
						<img width="20" height="20"
							src="https://obscloud.ulearning.cn/resources/web/17138858891083214.png">
						<div class="title">
							<p> {{item.title.substring(0,20)}}</p>
						</div>
						<view class="type">
							<view class="action">
								<view class="cu-tag round bg-orange light">{{item.types}}</view>
							</view>
						</view>
					</div>
				</div>
				<div class="mes_card_body">
					<div>
						<img :src="item.img" class="headimg" />
					</div>
					<div>
						<div class="card_content">
							{{ item.content.substring(0,10) }}
						</div>
					</div>
				</div>
				<div class="mes_card_bottom" >
					<view @click="showdetail(item.mesid)" style="margin-right: 4vw;"><van-icon size='1.2rem' name="todo-list-o" /></view>
					<view @click="showFreind(item.mesid)" style="margin-right: 4vw;"><van-icon size='1.2rem' name="friends" /></view>
					<p style="color: #0081ff;">{{item.time.substring(0,10)}}</p>		
				</div>
			</div>
		</view>
		<!-- <view class="meslist" v-for="(item,index) in list" :key="item.userid">
			<view class="mes">
				<img :src="item.img" alt="" class="headimg" />
				<view>
					<view class="Con">
						<view class="TitleAndContent">
							<h2 class="title"> {{item.title.substring(0,20)}} </h2>
							<view class="content">
								{{ item.content.substring(0,10) }}
							</view>
						</view>
						<view class="btn">
							<view @click="showdetail(item.mesid)"><van-icon name="todo-list-o" /></view>
							<view @click="showFreind(item.mesid)"><van-icon name="friends" /></view>
						</view>
					</view>
					<view class="timeAndType">
						<view class="time">
							{{item.time.substring(0,10)}}
						</view>
						<view class="type">
							<view class="action">
								<view class="cu-tag round bg-orange light">{{item.types}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</scroll-view>
</template>

<script>
	import mes from '@/modul/Aboutme/match_history_mes.vue'
	import {
		getMymatch
	} from '@/store/api.js'
	import {
		truncateString
	} from '@/store/constants.js'
	export default {
		mounted() {
			let data = {
				pageNum: 1,
				pageSize: 20
			}
			getMymatch(data).then((res) => {
				console.log(res)
				this.num++
				this.total = res.data.data.total
				res.data.data.rows.forEach(item => {
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.list.push({
						img: item.posterAvatar,
						title: item.title,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
						types: types
					})
				})
			}).catch(err => {
				console.log(err)
			})
		},
		components: {
			mes
		},
		data() {
			return {
				triggered: false,
				num: 1,
				total: 0,
				list: []
			}
		},
		methods: {
			onRestore() {
				this.triggered = true
				this.num = 1
				this.total = 0
				this.list = []
				let data = {
					pageNum: 1,
					pageSize: 20
				}
				getMymatch(data).then((res) => {
					console.log(res)
					this.num++
					this.total = res.data.data.total
					res.data.data.rows.forEach(item => {
						let types = ''
						item.tags.forEach(it => {
							types = types + '#' + it.name
						})
						this.list.push({
							img: item.posterAvatar,
							title: item.title,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime,
							types: types
						})
					})
				}).catch(err => {
					console.log(err)
				})
				setTimeout(() => {
					this.triggered = false
				}, 1000)
			},
			lowerBottom() {
				if (this.total > this.list.length) {
					let data = {
						pageNum: this.num,
						pageSize: 20
					}
					getMymatch(data).then((res) => {
						console.log(res)
						this.num++
						res.data.data.rows.forEach(item => {
							this.list.push({
								img: item.posterAvatar,
								title: item.title,
								content: truncateString(item.content),
								userid: item.posterId,
								mesid: item.id,
								time: item.beginTime
							})
						})
					}).catch(err => {
						console.log(err)
					})
				}
			},
			showFreind(mesid) {
				uni.navigateTo({
					url: `/subpkg/Match_friend/Match_friend?id=${mesid}`
				})
			},
			showdetail(mesid) {
				uni.navigateTo({
					url: `/subpkg/mes_detail/mes_detail?id=${mesid}`
				})
			}

		}
	}
</script>

<style scoped lang="less">
	.Con {
		width: 70vw;
		display: flex;
	}

	.meslist {
		position: relative;
		z-index: 1;
		margin-block-start: 20rpx;
	}

	@media screen and (min-width: 600px) {}

	.decription {
		display: flex;
		justify-content: space-between;
		padding-right: 20px;
	}

	.card_content {
		padding: 20px;
	}

	.mes_card {
		width: 94%;
		// margin: 3%;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: 20px;
	}

	.mes_card_top {
		width: 100%;
		margin-bottom: 20px;

	}

	.mes_card_bottom {
		width: 100%;
		display: flex;
		justify-content: end;
		padding-right: 20px;
		padding-top: 20px;
		align-items: center;
	}

	.mes_card_body {
		width: 90%;
		padding: 10%;
		display: flex;
		justify-content: start;
		flex-direction: row;
		background-color: #f3f7fa;
		padding: 10px;
		align-items: center;
		align-content: center;
		border-radius: 5px;

	}

	.meslist {
		position: relative;
		z-index: 1;
		padding: 18rpx;
	}

	/* 单个卡片 */
	.mes {
		align-items: center;
		z-index: 5;
		display: flex;
		border-radius: 10rpx;
		padding-top: 3vh;
		padding-bottom: 3vh;
		box-shadow: 1px 3px 5px 3px #888888;
		background-color: #fefefe;
		margin: 15rpx;
	}

	.headimg {
		width: 60px;
		height: 60px;
		margin-left: 6rpx;
		border-radius: 10px;
		// margin-bottom: 10rpx;
	}

	.content {
		width: 490rpx;
		font-size: 40rpx;
		-webkit-line-clamp: 2;
		margin-left: 15rpx;

	}

	.title {
		font-weight: 600;
		font-size: 35rpx;
		margin-left: 40rpx;
	}

	.bg {
		width: 100%;
		height: 74%;
		z-index: 0;
		position: absolute;
	}

	.status {
		// margin-top: -15rpx;
		font-size: small;
		margin-right: 5rpx;
	}
</style>